<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #app{
            text-align: center;
        }
        ul{
            list-style: none;
        }
        strong{
            display: inline-block;
            width: 100px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div id="app">
        <input type="text" v-model="searchName"> <br> <br>
        <button @click="sort=1">按年龄升序</button>
        <button @click="sort=0">按年龄原序</button>
        <button @click="sort=-1">按年龄降序</button>
        <ul>
            <li v-for="(item,index) in filterList" :key="item.id">
                <strong>编号:{{item.id}}</strong>
                <strong>姓名:{{item.name}}</strong>
                <strong>年龄:{{item.age}}</strong>
                <strong>老婆:{{item.wife}}</strong>
            </li>
        </ul>
    </div>
</body>
<script src="../js/vue.js"></script>
<script>
    new Vue({
        el:"#app",
        data:{
            sort:0, //-1:降序 0:原序 1:升序
            searchName:"", //搜索的用户名
            list:[ //基础数组
                {id:0,name:"damu",age:18,wife:"周冬雨"},
                {id:1,name:"高小乐",age:28,wife:"低大悲"},
                {id:2,name:"宁安妮",age:48,wife:"xxx"},
                {id:3,name:"小老付",age:19,wife:"痞幼"},
                {id:4,name:"小陪悦",age:38,wife:"嘤嘤嘤"},
                {id:5,name:"小欣宇",age:58,wife:"老李"}
            ]
        },
        computed:{
            filterList(){
                //过滤完的数组
                let filterList = this.list.filter(item=>item.name.includes(this.searchName));

                //对过滤完的数组进行排序
                switch (this.sort){
                    case -1:
                        filterList.sort((a,b)=>b.age-a.age)
                        break;
                    case 1:
                        filterList.sort((a,b)=>a.age-b.age)
                        break;
                }

                return filterList
            }
        }
    })
</script>
</html>